<template>
  <view class="addressList">
    <view class="al-main" id="al-main">
      <view class="al-top">
        <view class="alt-item" v-for="(item,index) in headList" :key="index" @click="onTopItem(item,index)">
          <view class="alt-main alt-bor">
             <view class="alt-img">
               <image :src="item.img" mode="widthFix" ></image>
               <view class="alt-marker" v-show="newFriendsNum[index] != '0'">{{newFriendsNum[index]}}</view>
             </view>
             <view class="alt-text">
               {{item.text}}
             </view>
           </view>
        </view>
      </view>
      <view class="al-cont">
        <view class="alt-item" :id="item.sort" v-for="(item,index) in friendsList" :key="index" >
        <!--  <view class="alt-tiltle" v-if="item.sort != ''">
            {{item.sort}}
          </view> -->
          <view class="alt-main" v-for="(Citem,Cindex) in item.list" @click="onFriends(Citem,Cindex)">
            <view class="alt-img">
              <image :src="Citem.head_img" mode="" ></image>
              <!-- <view class="alt-marker" v-show="item.marker != '0'">{{item.marker}}</view> -->
            </view>
            <view class="alt-text">
              {{Citem.user_nickname}}
            </view>
          </view>
        </view>
        <!-- <noData v-if="friendsList.length == 0"></noData> -->
      </view>
    </view>
  </view>
</template>

<script>
import noData from './noData.vue'
export default {
  components:{
    noData
  },
  props:{
    friendsList:Array,
    toView:String,
    newFriendsNum:Array
  },
  data() {
    return {
      headList:[
        {img:'../../../static/xs_icon/item1.png',text:'新的朋友',marker:'2'},
        {img:'../../../static/xs_icon/item2.png',text:'群聊',marker:'0'}
      ],
      topHeight:0       // 最外层距离顶部的高度
    }
  },
  watch:{
    toView(n){
      this.jumpLetter(n);
    }
  },
  onLoad() {

  },
  created(){

  },
  mounted() {

  },
  methods: {
      // 监听传进来的字母 然后滚动对应的位置
      /**
       * 高度计算 res.top 标识元素距离顶部的高度  data.top 最外层高度 可能是负数
       * */
      jumpLetter(n){
        const query = uni.createSelectorQuery().in(this);
        query.select("#al-main").boundingClientRect(data => {
          // console.log(data.top)
          this.topHeight = data.top; // 最外层距离顶部的高度
        }).exec()
        query.select("#"+n).boundingClientRect(res => {//最外层盒子的节点：类或者id
           // console.log(res.top)
          uni.pageScrollTo({
            duration: 200,//过渡时间
            scrollTop:res.top - this.topHeight,//到达距离顶部的top值
          })
        }).exec()
      },
      // 新的朋友 群聊 点击事件
      onTopItem(item,index){
        this.$emit("onTopItem",item)
      },
      // 好友列表点击事件
      onFriends(Citem,Cindex){
        this.$emit("onFriends",Citem)
      }
  }
}
</script>

<style lang="less" scoped>
  .addressList{
    background-color: #fff;
    .al-top,.al-cont{
      .alt-item{
        .alt-tiltle{
          background-color: #EDEDED;
          padding: 20upx 32upx;
        }
        .alt-main{
           display: flex;
           padding: 20upx 22upx 0;
           .alt-img{
             position: relative;
             // display: inline-block;
             // vertical-align: middle;
             padding: 10upx 10upx;
             image{
               width: 80upx;
               height: 80upx;
               border-radius: 10px;
             }
             .alt-marker{
               position: absolute;
               top: 0;
               right: 0;
               background-color: #FD3B31;
               width: 32upx;
               height: 32upx;
               border-radius: 50%;
               color: #fff;
               text-align: center;
               line-height: 32upx;
               font-size: 24upx;
             }
           }
           .alt-text{
             // display: inline-block;
             // vertical-align: middle;
             // height: 90upx;
             // line-height: 90upx;
             padding: 0 20upx;
             display: flex;
             align-items: center;
             width: 100%;
             border-bottom: 1px solid #EEEEEE;
           }
        }
      }
    }
    .al-top{
      .alt-item:nth-last-child(1){
        border-bottom: 1px solid #EDEDED;
        .alt-text{
          border-bottom: 1px solid #fff;
        }
      }
    }
    .al-cont{
      .alt-main:nth-last-child(1){
        border-bottom: 1px solid #EEEEEE;
        .alt-text{
          border-bottom: 1px solid #fff;
        }
      }
    }
  }
</style>
